﻿<script setup lang="ts" name="IconList">
import { getIconList, iconTypeList, iconType } from '@/plugins/svgIcon'
import { cloneDeep } from 'lodash-es'
import { randomColor } from '@/utils/color/theme'
import { storeToRefs } from 'pinia'
import useCopy from '@/hooks/web/useCopy'
import { useAppStoreWithOut } from '@/store/modules/app'
import { useMessage } from '@/hooks/web/useMessage'
const { success, error } = useMessage()

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const { t } = useI18n() // 国际化
const { copy } = useCopy()
const { clipboardRef, copiedRef } = copy()
const iconList = getIconList()
const iconTypeData = iconTypeList()

type queryParamsType = {
  pageIndex: number,
  pageSize: number,
  type: string|undefined,
  name: string,
  fontSize: number,
  isColor: boolean,
  icon: string
}

const total = ref(0) // 列表的总页数
const list = ref<iconType[]>([]) // 表格数据
const queryLoading = ref(false) // 列表加载中：1）列表数据加载；2）查询按钮禁用；3）重置按钮禁用
const queryParams = ref<queryParamsType>({
  pageIndex: 1,
  pageSize: 72,
  type: undefined,
  name: '',
  fontSize: 28,
  isColor: false,
  icon: ''
})

const getList = () => {
  list.value = []
  queryLoading.value = true
  let resultData = cloneDeep(iconList)
  if (queryParams.value.type) {
    resultData = resultData.filter((item) => { return item.type === queryParams.value.type })
  }
  if (queryParams.value.name !== '') {
    resultData = resultData.filter((item) => { return item.key.includes(queryParams.value.name) })
  }
  total.value = resultData.length
  list.value = resultData.slice(
    queryParams.value.pageSize * (queryParams.value.pageIndex - 1),
    queryParams.value.pageSize * (queryParams.value.pageIndex - 1) + queryParams.value.pageSize
  )
  queryLoading.value = false
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageIndex = 1
  getList()
}


// 复制图标组件
const handleCopyComponent = (item) => {
  if (!item) {
    error(t('message', 'copyFail'))
    return
  }
  const svgComponent = '<svg-icon icon="' + item.type + ':' + item.key + '" size="' + queryParams.value.fontSize + '" color="' + (queryParams.value.isColor ? randomColor() : '') + '"></svg-icon>'
  clipboardRef.value = svgComponent
  if (unref(copiedRef)) {
    success(t('message', 'copySuccess'))
  }
}

// 复制图标名文本
const handleCopyText = (item) => {
  if (!item) {
    error(t('message', 'copyFail'))
    return
  }
  const svgComponent = item.type + ':' + item.key
  clipboardRef.value = svgComponent
  if (unref(copiedRef)) {
    success(t('message', 'copySuccess'))
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<template>
  <PageCard>
    <ContentFormTable>
      <template #header>
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <ElFormItem>
            <el-input v-model="queryParams.name" :placeholder="t('common.icon.rules', 'name')" class="input-with-select" clearable style="width: 340px" @change="handleQuery">
              <template #prepend>
                <ElSelect v-model="queryParams.type" :placeholder="t('common.icon.rules', 'type')" style="width: 136px" clearable @change="handleQuery">
                  <ElOption v-for="(item, index) in iconTypeData" :key="index" :label="item.label" :value="item.value" />
                </ElSelect>
              </template>
              <template #append>
                <el-button icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </ElFormItem>
          <ElFormItem><el-input-number v-model="queryParams.fontSize" :min="12" :max="40" style="width: 120px" /> </ElFormItem>
          <ElFormItem><el-checkbox v-model="queryParams.isColor" :label="t('common.icon', 'color')" border /></ElFormItem>
          <ElFormItem :label="t('common.icon', 'picker')"><InputIconPicker v-model:icon="queryParams.icon" class="!w-240px" /></ElFormItem>
        </el-form>
      </template>
      <template #content>
        <el-scrollbar v-loading="queryLoading && systemConfig.loadingType === 'module'">
          <el-row :gutter="systemConfig.space">
            <el-col v-for="(item, index) in list" :key="index" :xs="8" :sm="6" :md="3" :lg="2" :xl="2">
              <el-card shadow="hover" :title="item.key" @click="handleCopyComponent(item)">
                <svg-icon :icon="item.type + ':' + item.key" :size="queryParams.fontSize" :color="queryParams.isColor ? randomColor() : ''" />
                <span class="copy-span">{{ t('common.icon', 'copy') }}</span>
              </el-card>
              <span class="text-span" :title="item.key" @click="handleCopyText(item)">{{ item.key }}</span>
            </el-col>
          </el-row>
        </el-scrollbar>
      </template>
      <template #footer>
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageIndex" :total="total" :pageSizes="[72, 144, 216, 288]" :disabled="queryLoading" @pagination="getList" />
      </template>
    </ContentFormTable>
  </PageCard>
</template>

<style scoped lang="scss">
.el-scrollbar{
  margin: 0 -10px;

  :deep(.el-scrollbar__view){
    padding: 0 10px;
  }
}

.el-row {
  .el-col {
    cursor: pointer;

    .el-card {
      :deep(.el-card__body) {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
        padding: 15px;
        overflow: hidden;
        transition: all 0.28s;

        .copy-span {
          position: absolute;
          bottom: -20px;
          left: 0;
          display: block;
          width: 100%;
          height: 20px;
          line-height: 20px;
          color: var(--el-color-white);
          text-align: center;
          background: var(--el-color-primary);
          transition: all 0.28s;
        }
      }

      &:hover {
        :deep(.el-card__body) {
          padding: 5px 15px 25px;

          .copy-span {
            bottom: 0;
          }
        }
      }
    }

    .text-span {
      display: block;
      width: 100%;
      height: 30px;
      overflow: hidden;
      font-size: var(--el-font-size-extra-small);
      line-height: 30px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
